<template>
  <div class="box">
    <div>
      <div class="top-title">{{msg.title}}<span class="top-year">({{msg.year}})</span></div>
    </div>
    <div class="box-main">
      <div class="images" >
        <img :src="msg.images.small" :alt="msg.alt">
      </div>
      <div class="box-desc">
        <div>导演: <span v-html="add(msg.directors)"> </span></div>
        <div>主演:<span v-html="add(msg.casts)"> </span></div>
        <div>类型: {{ msg.genres|dir }}</div>
        <div>制片国家/地区:</div>
        <div>{{ msg.pubdates|dir }}</div>
        <div>上映时间:{{msg.mainland_pubdate}}</div>
        <div>片长:{{msg.durations|dir}}</div>
        <div>又名:{{msg.original_title}}</div>
        <div>IMDb链接:{{msg.id}}</div>
      </div>
      <div class="box-grade">
        <div>豆瓣评分 <span class="grade">{{msg.rating.average}}</span>
          <el-rate
              v-model="msg.rating.average/2"
              disabled
              text-color="#ff9900"
              score-template="{msg.rating.average}">
          </el-rate>
        </div>
        <div>{{sum}}人评分</div>
        <div v-if="sum===0">暂无评分</div>
        <div v-else class="graded">
          <div class="left">
            <div>五星</div>
            <div>四星</div>
            <div>三星</div>
            <div>二星</div>
            <div>一星</div>
          </div>
          <div class="right">
            <el-progress class="right-1" :text-inside="true" :stroke-width="15"
                         :percentage="percent(msg.rating.details[5])"></el-progress>
            <el-progress class="right-1" :text-inside="true" :stroke-width="15"
                         :percentage="percent(msg.rating.details[4])"
                         status="success"></el-progress>
            <el-progress class="right-1" :text-inside="true" :stroke-width="15"
                         :percentage="percent(msg.rating.details[3])"
                         status="warning"></el-progress>
            <el-progress class="right-1" :text-inside="true" :stroke-width="15"
                         :percentage="percent(msg.rating.details[2])"
                         status="exception"></el-progress>
            <el-progress class="right-1" :text-inside="true" :stroke-width="15"
                         :percentage="percent(msg.rating.details[1])"
                         status="exception"></el-progress>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "Box",
    components: {},
    props: {
      msg: {
        type: Object,
        default: () => {
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      To(val) {
        window.open(val)
      },
      add(val) {
        let arr = []
        val.map(item => arr.push(`<a href="${item.alt}" target="_blank">${item.name}</a>`))
        return arr.join("/")
      }, percent(n) {
        if (this.sum === 0) {
          return 0
        } else {
          return Number((n * 100 / this.sum).toFixed(2))
        }
      }

    },
    mounted() {

    },
    created() {

    },
    filters: {
      dir(val) {
        let arr = []
        val.map(item => {
          if (item.name) arr.push(item.name)
          else arr.push(item)
        })
        return arr.join("/");
      }
    },

    computed: {
      sum() {
        let count = 0
        let arr = Object.values(this.msg.rating.details)
        arr.map(item => {
          count += item
        })
        return count
      }
    },
    watch: {},
    directives: {}
  }
</script>

<style scoped lang="scss">
  .box {
    width: 510px;
    height: 270px;
  }

  .top-title {
    font-weight: bold;
    font-size: 20px;
    width: 510px;
    height: 30px;
  }

  .top-year {
    color: gray;
  }

  .box-main {
    width: 510px;
    height: 270px;
    display: flex;
  }

  .images {
    width: 100px;
    height: 270px;
  }

  .box-desc {
    width: 250px;
    height: 270px;
  }
.box-grade{
  width: 120px;
  height: 270px;
  .grade{
    font-size: 18px;
    color: red;
  }
}
  .graded{
    width: 120px;
    display: flex;
    .left{
      width: 40px;
    }
    .right{
      width: 80px;
      .right-1{
        height: 20px;
      }
    }
  }
  img {
    width: 80px;
  }
</style>